<template>
    <div class="page">
      <heads></heads>
      <div class="page-content" style="width: 100%">
        <mt-swipe :auto="4000" >
          <mt-swipe-item>
            <img src="http://m.kaixincaimin.com/images/banner/01.jpg"/>
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="http://m.kaixincaimin.com/images/banner/02.jpg"/>
          </mt-swipe-item>
        </mt-swipe>

        <div>
          <div class="mint-list-l">
            <div v-for="(item,key) in listkind" @click="routes(item.href)">
                <div class="imgs">
                  <img :src="item.img">
                </div>
                <div class="texts">
                  <p>{{item.title}}</p>
                  <span>{{item.explain}}</span>
                </div>
            </div>
          </div>
        </div>
      </div>
      <footers></footers>
    </div>
</template>
<script>
  import heads from '../components/header'
  import footers from '../components/footer'
  import { Toast } from 'mint-ui';
export default {
    data(){
        return{
            listkind:[{
                 href:false,
                title:'双色球',
                explain:'500万不是梦',
                img:'/static/lmLogoSsq.png',
            },{
                 href:false,
                title:'大乐透',
                explain:'奖金最丰厚',
                img:'/static/index_img4.png',
            },{
                href:'/basketball?id=131',
                title:'篮球',
                explain:'猜胜负，易中奖',
                img:'/static/index_img8.png',
            },{
                href:'/soccer?id=121',
                title:'足球',
                explain:'单场胜负，简单好玩',
                img:'/static/index_img1.png',
            },{
                href:'/basketball?id=132',
                title:'篮球',
                explain:'让分竞猜，覆盖NBA',
                img:'/static/index_img19.png',
            },{
                href:'/soccer?id=122',
                title:'足球',
                explain:'让分胜负，球迷首选',
                img:'/static/index_img18.png',
            },{
                href:'/hot',
                title:'猜上证',
                explain:'涨跌都能赚',
                img:'/static/index_img6.png',
            },{
                href:'/funny',
                title:'重庆时时彩',
                explain:'全天高频开奖',
                img:'/static/index_img11.png',
            },
            // {
            //     href:'/every_color',
            //     title:'时时彩',
            //     explain:'投注赢大奖',
            //     img:'/static/index_img11.png',
            // },
            {
                href:'/nearlyThree?id=151',
                title:'易快3',
                explain:'好玩、易中',
                img:'/static/index_img3.png',
            },{
                href:false,
                title:'幸运赛车',
                explain:'敬请期待',
                img:'/static/index_img2.png',
            }],
        }
    },
    mounted(){

    },
    methods:{
      routes(h){
        if(!h){
         Toast({
            message: '暂停销售',
            duration: 1000
         });
        }else{
           this.$router.push({path:h})
        }
        
      }
    },
    components: {
      heads,
      footers
    }

}
</script>
<style>
  .mint-swipe{
    max-height: 150px;
  }
.mint-swipe img{
  width: 100%;
  max-height: 150px;
}
  .mint-list-l{
    text-align: left;
font-size: 0;
padding-bottom:50px;
    /* border-bottom:1px solid #ededed ; */
  }
  .mint-list-l>div{
    display: inline-block;
    width:50%;
    /* height:117px; */
    vertical-align: bottom;
     /* text-align: center; */

  }
  .mint-list-l>div:first-child{
    /* border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed; */
  }
  .mint-list-l>div:last-child{
    /* border-left: 1px solid #ededed;
    border-top: 1px solid #ededed; */
  }
  .mint-list-l a{
    font-size: 14px;
    color: #6b7fa7;
       display: block;
  }
  .mint-list-l img{
    width: 100%;
    min-width:25px;
    max-width: 45px;
    display: block;
    margin: auto;
      margin-right: 0;
  }
  .texts{
        /* margin-top: 30px; */
    display: inline-block;
    vertical-align: middle;
    text-align: left;
  }
    .texts p{
      margin: 0;
          color: #333;
      font-size: 14px;
    }
  .imgs{
      margin-top: 15px;
      margin-bottom: 15px;
    display: inline-block;
    width:20%;
 margin-left:10%;
      margin-right: 2%;
    vertical-align: middle;

  }
  .mint-list-l >div:nth-child(even) .imgs{
     margin-left:8% !important; 
  }
  .mint-list-l span{
    font-size: 12px;
    display: block;
        color: #999;
    /* text-align: center; */
  }
  .page-content{
    background-color: #1b1f2e;
  }
</style>

